<template>
	<div class="con">
		<router-view></router-view>
		<div class="footer-bar">
			<van-tabbar v-model="active" @change="onChange" safe-area-inset-bottom active-color="#222222" inactive-color="#888888">
				<van-tabbar-item v-for="(item, index) in list" :key="index">
					<template #icon="props">
						<div class="icon" :class="{ redenv: item.isRed }">
							<img :src="item.checkIconUrl" v-show="props.active" />
							<img :src="item.unCheckIconUrl" v-show="!props.active" />
						</div>
					</template>
					<span :class="{ redenv_title: item.isRed }">{{ item.name }}</span>
				</van-tabbar-item>
			</van-tabbar>
		</div>

		<!-- 客服按钮 -->
		<div class="shop-kefu-btn" @click="toKFLink">
			<img src="@/assets/2/icon/kefu.png" />
		</div>
	</div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vant';
export default {
	data() {
		return {
			list: [
				{
					name: '首页',
					link: '/squeeze/ticket',
					checkIconUrl: require('@/assets/images/free/index_c.png'),
					unCheckIconUrl: require('@/assets/images/free/index.png')
				},
				{
					name: '抢红包',
					link: '/squeeze/ticket/kf',
					checkIconUrl: require('@/assets/images/free/red2.gif'),
					unCheckIconUrl: require('@/assets/images/free/red2.gif'),
					isRed: true
				},
				{
					name: '我的订单',
					link: '/squeeze/ticket/my',
					checkIconUrl: require('@/assets/images/free/my_c.png'),
					unCheckIconUrl: require('@/assets/images/free/my.png')
				}
			],
			active: 0
		};
	},
	components: {
		'van-tabbar': Tabbar,
		'van-tabbar-item': TabbarItem
	},
	created() {},
	mounted() {},
	methods: {
		tabRouter(val) {
			this.active = this.list.findIndex(e => val.path == e.link);
		},

		onChange(i) {
			if (i == 1) {
				// 跳转到百万补贴
				window.location.href = 'https://zfx.xmonecode.com/?flashsale=2&sdkType=yzf&app=yzf&channel=1012&hybridVersion=3.0';
				return;
				// 以下是调起客服
				window.ysf('onready', function() {
					window.ysf('open');
				});
				this.active = 0;
				if (this.$route.path === '/free/my') {
					this.$router.push({ path: '/free' });
				}
				return;
			}
			console.log('this.list[i].link', this.list[i].link);
			this.$router.push({
				path: this.list[i].link
			});
		},
		toKFLink() {
			window.ysf('open');
		}
	},
	watch: {
		$route: {
			handler(val) {
				console.log('$route', val);
				this.tabRouter(val);
			},
			immediate: true,
			deep: true
		}
	}
};
</script>

<style lang="scss" scoped>
.con {
	height: calc(100% - 100px);
	background-color: #f5f5f5;
}
.footer-bar {
	width: 100%;
	height: 100px;
	box-shadow: 0 0 12px #ccc;
	background: $color-white;
	z-index: 100;
	position: fixed;
	bottom: 0;

	/deep/.van-tabbar {
		height: 100px;
	}

	/deep/.van-tabbar-item {
		display: flex;
		flex-direction: column;
	}

	.icon {
		img {
			height: 40px;
			width: 40px;
		}
	}
}

.shop-kefu-btn {
	position: fixed;
	right: 30px;
	z-index: 999;
	border-radius: 100px;
	height: 80px;
	width: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.shop-kefu-btn {
	bottom: 385px;
	border-color: #fff;
	background-color: #fff;

	img {
		height: 60px;
		width: 60px;
	}
}
.redenv {
	img {
		width: 100px !important;
		height: 100px !important;
		position: relative;
		top: -30px;
		z-index: 9999;
	}
}
.redenv_title {
	position: relative;
	top: -35px;
	color: #e35c52;
}
</style>
